<template>
  <vab-card shadow="never">
    <template #header>基础信息</template>
    <el-row v-if="props?.baseInfo" :gutter="24">
      <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
        <el-form-item label="客户名称" prop="customerName">
          <span class="default-text" :title="props?.baseInfo.customerName">
            {{ props?.baseInfo.customerName }}
          </span>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
        <el-form-item label="客户编码" prop="customerNo">
          <span class="default-text" :title="props?.baseInfo.customerNo">
            {{ props?.baseInfo.customerNo }}
          </span>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
        <el-form-item label="客户地址" prop="customerAddress">
          <el-cascader
            v-model="props.baseInfo.customerAddress"
            :options="props.areaOptions"
            :props="{ value: 'code', label: 'name' }"
          >
            <template #default="{ data }">
              <span>{{ data.name }}</span>
            </template>
          </el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
        <el-form-item label="联系人" prop="contacts">
          <el-input
            v-model="props.baseInfo.contacts"
            :title="props.baseInfo.contacts"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
        <el-form-item label="联系电话" prop="contactsPhone">
          <span v-if="!props.isUpdate" class="default-text">
            {{ Encryption(props.baseInfo.contactsPhone, 'phone') }}
          </span>
          <el-input v-else v-model="props.baseInfo.contactsPhone" />
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="12" :sm="12" :md="12" :lg="12" :xl="8">
        <el-form-item label="联系地址" prop="contactsAddress">
          <el-input v-model="props.baseInfo.contactsAddress" />
        </el-form-item>
      </el-col>
    </el-row>
  </vab-card>
</template>
<script lang="ts" setup>
  import { Encryption } from '/@/utils/utils'
  const props = defineProps({
    baseInfo: {
      type: Object,
      required: true,
      default: () => {
        return {}
      },
    } as any,
    isUpdate: {
      type: Boolean,
      required: true,
      default: false,
    },
    areaOptions: {
      type: Array,
      required: true,
      default: [],
    } as any,
  })
  // 充值
  const handleRecharge = () => {}
</script>
